<template>
  <div>
    <h2 align="left">农产品列表</h2>
    <h3 align="left">农作物观察周期+入库</h3>
    <el-button icon="el-icon-edit-outline" style="background-color: #91b725;color: #ffffff" @click="openadd">种植作物
    </el-button>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          label="作物编号"
          prop="id"
          width="280">
      </el-table-column>
      <el-table-column
          label="作物名称"
          prop="name"
          width="220">
      </el-table-column>
      <el-table-column
          label="状态"
          prop="status"
          width="300">
        <template v-slot="scope">
          <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#51976FFF"
              active-icon-class="el-icon-grape"
              inactive-color="#A7BD6FFF"
              inactive-icon-class="el-icon-cherry"
              style="display: block"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="280">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="xq(scope.row)">
            <span style="color: #a7bd6f;font-size: 15px">
            <i class="el-icon-s-order"></i>详情
            </span>
          </el-button>
          <el-button size="small" type="text" @click="openGrow(scope.row.id)">
            <span style="color: #729847;font-size: 15px">
            <i class="el-icon-s-data"></i>记录
            </span>
          </el-button>
          <el-button size="small" type="text" @click="openzw(scope.row.id)">
            <span style="color: #488b3b;font-size: 15px">
            <i class="el-icon-menu"></i>周期
            </span>
          </el-button>
          <el-button v-if="scope.row.status==1" size="small" type="text" @click="openStash(scope.row)">
            <span style="color: #258d6c;font-size: 15px">
            <i class="el-icon-s-home"></i>入库
            </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    农作物添加-->
    <el-dialog :visible.sync="dialogFormVisible" title="种植作物" width="700px">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="60px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="作物名称" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="作物类型" prop="typeId">
              <el-select v-model="form.typeId" clearable placeholder="请选择作物类型">
                <el-option v-for="t in types" v-bind:key="t.id" :label="t.name" :value="t.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="肥料名称" prop="fertilizerName">
              <el-input v-model="form.fertilizerName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="种植方式" prop="plantId">
              <el-select v-model="form.plantId" clearable placeholder="请选择种植方式">
                <el-option v-for="p in plan" v-bind:key="p.id" :label="p.name" :value="p.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="种植年度" prop="plantAge">
              <el-input v-model="form.plantAge" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="是否套袋" prop="flat">
              <el-select v-model="form.flat" clearable placeholder="是否套袋">
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="育苗周期" prop="seedlingCycle">
              <el-input v-model="form.seedlingCycle" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="灌溉周期" prop="irrigationCycle">
              <el-input v-model="form.irrigationCycle" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="施肥周期" prop="fertilizationCycle">
              <el-input v-model="form.fertilizationCycle" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="除草周期" prop="weedingCycle">
              <el-input v-model="form.weedingCycle" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="详细地址" prop="address">
              <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="备注" prop="remark">
              <el-input v-model="form.remark" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button style="background-color: #90b624" type="primary" @click="add('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--    回显详情-->
    <el-dialog :visible.sync="dialogFormVisible2" title="农作物详情" width="700px">
      <el-form :model="form2" label-width="60px">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="农作物id">
              <el-input v-model="form2.id" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="农作物名称">
              <el-input v-model="form2.name" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="地址">
              <el-input v-model="form2.address" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="农户">
              <el-input v-model="form2.uname" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="施肥情况">
              <el-input v-model="form2.fertilizationCycle" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="种植方式">
              <el-input v-model="form2.tname" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="肥料名称">
              <el-input v-model="form2.fertilizerName" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="是否套袋">
              <el-radio v-model="form2.flat" :label="1" disabled>否</el-radio>
              <el-radio v-model="form2.flat" :label="0" disabled>是</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="农户电话">
              <el-input v-model="form2.utel" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="年度">
              <el-input v-model="form2.plantAge" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="育苗周期">
              <el-input v-model="form2.seedlingCycle" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="灌溉周期">
              <el-input v-model="form2.irrigationCycle" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="除草周期">
              <el-input v-model="form2.weedingCycle" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="登记时间">
              <el-input v-model="form2.createDate" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="备注">
              <el-input v-model="form2.remark" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--   记录作物生长 -->
    <el-dialog :visible.sync="dialogFormVisible3" title="记录作物生长" width="700">
      <el-form ref="ruleForm1" :model="form3" :rules="rules1" label-width="60">
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="温度" prop="temperature">
              <el-input v-model="form3.temperature" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="生长情况" prop="growStatus">
              <el-input v-model="form3.growStatus" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="水分" prop="water">
              <el-input v-model="form3.water" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="生长情况" prop="lightStatus">
              <el-input v-model="form3.lightStatus" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="备注" prop="remark">
              <el-input v-model="form3.remark" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label-width="formLabelWidth" label="生长图片" prop="pic">
              <el-upload
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleAvatarSuccess"
                  :show-file-list="false"
                  action="http://localhost:10010/cropservice/grow/addPic"
                  class="avatar-uploader">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button style="background-color: #90b624" type="primary" @click="addGrow('ruleForm1')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogTableVisible4" title="作物周期管理" width="1275px">
      <el-table :data="gridData">
        <el-table-column label="作物id" property="cropId" width="180"></el-table-column>
        <el-table-column label="生长状态" property="growStatus" width="150"></el-table-column>
        <el-table-column label="光照情况" property="lightStatus" width="150"></el-table-column>
        <el-table-column label="记录时间" property="createDate" width="150"></el-table-column>
        <el-table-column label="温度" property="temperature" width="150"></el-table-column>
        <el-table-column label="水分状态" property="water" width="150"></el-table-column>
        <el-table-column label="备注" property="remark" width="150"></el-table-column>
        <el-table-column label="图片" property="pic" width="150">
          <template v-slot="p">
            <el-image
                :fit="fit"
                :src="p.row.pic"
                style="width: 100px; height: 100px"></el-image>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog :visible.sync="dialogTableVisible5" title="入库" width="1275px">
      <el-form :model="form4" label-width="60px">
        <el-form-item :label-width="formLabelWidth" label="数量">
          <el-input v-model="form4.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="尺寸">
          <el-input v-model="form4.size" autocomplete="off">/立方米</el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button style="background-color: #90b624" type="primary" @click="inStash">确 定</el-button>
      </div>

    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "CropView",
  data() {
    return {
      //2属性定义
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '100px',
      form: {},
      types: [],
      plan: [],
      form2: {},
      form3: {},
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      imageUrl: '',
      gridData: [],
      dialogTableVisible4: false,
      dialogTableVisible5: false,
      form4: {},
      rules: {
        remark: [
          {required: true, message: '请输入备注', trigger: 'blur'},
        ], address: [
          {required: true, message: '请输入详细地址', trigger: 'blur'},
        ], weedingCycle: [
          {required: true, message: '请输入除草周期', trigger: 'blur'},
        ], fertilizationCycle: [
          {required: true, message: '请输入施肥周期', trigger: 'blur'},
        ], irrigationCycle: [
          {required: true, message: '请输入灌溉周期', trigger: 'blur'},
        ], seedlingCycle: [
          {required: true, message: '请输入育苗周期', trigger: 'blur'},
        ], flat: [
          {required: true, message: '请输入是否套袋', trigger: 'change'},
        ], plantAge: [
          {required: true, message: '请输入种植年度', trigger: 'blur'},
        ], plantId: [
          {required: true, message: '请输入种植方式', trigger: 'change'},
        ], fertilizerName: [
          {required: true, message: '请输入肥料名称', trigger: 'blur'},
        ], typeId: [
          {required: true, message: '请输入作物类型', trigger: 'change'},
        ], name: [
          {required: true, message: '请输入作物名称', trigger: 'blur'},
        ],
      }, rules1: {
        temperature: [
          {required: true, message: '请输入温度', trigger: 'blur'},
        ], growStatus: [
          {required: true, message: '请输入生长情况', trigger: 'blur'},
        ], water: [
          {required: true, message: '请输入水分', trigger: 'blur'},
        ], lightStatus: [
          {required: true, message: '请输入生长情况', trigger: 'blur'},
        ], remark: [
          {required: true, message: '请输入备注', trigger: 'blur'},
        ], pic: [
          {required: true, message: '请输入生长图片', trigger: 'change'},
        ],
      }
    }
  }, methods: {
    openStash(row) {
      this.form4.num = null
      this.dialogTableVisible5 = true;
      this.form4 = row

    },
    inStash() {
      this.axios.post("cropservice/stash/add", this.form4).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg)
          this.dialogTableVisible5 = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    openzw(id) {
      this.dialogTableVisible4 = true
      this.axios.post("cropservice/grow/list?cropId=" + id).then(res => {
        console.log(res);
        this.gridData = res.data.data;
      })
    },
    addGrow(formName1) {

      this.$refs[formName1].validate((valid) => {
        if (valid) {
          this.axios.post("cropservice/grow/addGrow", this.form3).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.dialogFormVisible3 = false;
              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.form3.pic = res.data;
      } else {
        this.$message.error(res.msg);
      }

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //3自定义方法
    openGrow(id) {
      this.form3.cropId = id;
      this.dialogFormVisible3 = true;
    },
    xq(row) {
      this.form2 = row;
      this.dialogFormVisible2 = true;
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("cropservice/crop/addCrop", this.form).then(res => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.dialogFormVisible = false;
              this.getList();
            } else {
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },
    getPlan() {
      this.axios.post("cropservice/crop/plan").then(res => {
        this.plan = res.data.data;
      })
    },
    getTypes() {
      this.axios.post("cropservice/crop/types").then(res => {
        this.types = res.data.data;
      })
    },
    openadd() {
      this.form = {};
      this.dialogFormVisible = true;
    },
    getList() {
      this.axios.post("cropservice/crop/list").then(res => {
        this.tableData = res.data.data;
      })
    }
  }, created() {
    //4.钩子函数
    this.getList();
    this.getTypes();
    this.getPlan();
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
